<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="data">
    <div class="data-left">
      <div>{{ hoursTime }}:{{ minutesTime }}</div>
      <div style="margin: 0rem 1rem;"> {{ weekDayNameTime }}</div>
      <div class="line"> <img src="@/assets/layer/line2.png"></div>
      <div>{{ yearTime }}年{{ monthTime }}月{{ dayTime }}日</div>
    </div>

    <!-- <div class="data-right">
      <img src="@/assets/layer/logo.png">
    </div> -->
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { ref } from "vue";
const weekDayNameTime = ref(0)
const yearTime = ref(0)
const monthTime = ref(0)
const dayTime = ref(0)
const hoursTime = ref(0)
const minutesTime = ref(0)
const secondsTime = ref(0);
let hoursTimeLst = null
const updateTime = () => {
  const currentDate = new Date();

  // 获取年份
  const year = currentDate.getFullYear();

  // 获取月份（注意：月份是从 0 开始的，即 0 表示一月，11 表示十二月）
  const month = currentDate.getMonth() + 1; // 加 1 是因为 getMonth() 返回的是 0-11

  // 获取日期
  const day = currentDate.getDate();

  // 获取星期（注意：星期是从 0 开始的，即 0 表示星期日，6 表示星期六）
  const weekday = currentDate.getDay();

  // 将星期转换为对应的字符串
  var weekdays = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  const weekDayName = weekdays[weekday];

  // 获取小时
  let hours = currentDate.getHours();
  hours = hours < 10 ? "0" + hours : hours;

  // 获取分钟
  let minutes = currentDate.getMinutes();
  minutes = minutes < 10 ? "0" + minutes : minutes;

  // 获取秒数
  let seconds = currentDate.getSeconds();
  seconds = seconds < 10 ? "0" + seconds : seconds;

  // 业务
  if(!hoursTimeLst){
    hoursTimeLst = hours;
    // eslint-disable-next-line no-undef
    THREEX.observer.trigger("UPDATE_HOURTES",hoursTimeLst);
  }

  if(hours > hoursTimeLst){
    hoursTimeLst = hours;
    // eslint-disable-next-line no-undef
    THREEX.observer.trigger("UPDATE_HOURTES",hoursTimeLst);
  }
  // eslint-disable-next-line no-undef

    // eslint-disable-next-line no-undef
 
  weekDayNameTime.value = weekDayName;
  yearTime.value = year;
  monthTime.value = month;
  dayTime.value = day;
  hoursTime.value = hours;
  minutesTime.value = minutes;
  secondsTime.value = seconds;
}

onMounted(()=>{
  // eslint-disable-next-line no-undef

    setInterval(updateTime,1000);

})
</script>

<style scoped lang="less">
.data {
  font-weight: bold;
  color: #fff;
  font-size: 2rem;
  font-size: 2rem;
  display: flex;
    justify-content: center;
}

.data-left .line {

  margin-right: 1rem;
}

.data-left {
  // width: 100%;
 display: flex;
 justify-content: center;
 
 margin-top: 1rem;

}

.data-right {
  display: inline-block;
  margin-right: 2rem;
  margin-right: 2rem;
    margin-left: 4rem;
    margin-top: 0.3rem;
  width: 9rem;
  img{
    width: 100%;
  }
}
</style>
